<template>
  <div>
    <el-table
      id="outTable"
      ref="talbes"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        show-overflow-tooltip>
      </el-table-column>
     </el-table>
    <el-button style="margin-top:20px;" type="primary" icon="el-icon-download"  @click="exportExcel">Excel 导出</el-button>
  </div>
</template>
<script>
import {tableDataExcel} from '@/utils/tableData'
import toExcel from '@/utils/jsonexcel'
export default{
  name:'TableExcel',
  data(){
    return{
      thDataList:[],  // 存储表头
      filterVal:[],   // 存储表单数据
      tableData:tableDataExcel(),
      checkedDataRows:[]
    }
  },
  methods:{
     // 这个是点击 表格前面的选中框才会执行
     handleSelectionChange(val) {
        this.checkedDataRows = val
     },
    // 获取 表格里面的prop 和label 属性
    getLabelProp(){
      let arr = [];
      this.$refs.talbes.$children.forEach((item) => {
      if (item.label != undefined && item.prop != undefined) {
          arr.push({
             label: item.label,
             prop: item.prop,
          });
         }
      });
      return arr;
    },
    // 自定义导出  导出数据一样会重复
    exportExcel(){	
      if (this.checkedDataRows.length !== 0) {					//  判断选择框是否选中数据
        for (var i = 0; i < this.getLabelProp().length; i++) {			// 数组循环
          console.log('label',this.getLabelProp()[i].label);
          this.thDataList.push(this.getLabelProp()[i].label)			// 循环得到 el-table中的label值，作为Excel表格的表头
          this.filterVal.push(this.getLabelProp()[i].prop)				// 循环得到 el-table中的porp值， 作为Excel表格的数据
        }
        const th = this.thDataList
        const data = this.checkedDataRows.map(v => this.filterVal.map(k => v[k]))		// 这里使用数据筛选
        const [fileName, fileType, sheetName] = ['设备数据', 'xlsx', '测试页']			// 这里的数组中传递三个参数，分别是Excel的文件名称， Excel的文件类型后缀， 第三个参数不会显示，但是必须要存在
        toExcel({th, data, fileName, fileType, sheetName})				// 最后把数据传递过去
      } else {
        this.$message({
          message: '请选择至少一条数据进行操作！',
          type: 'warning'
        })
      }
     }
   }
}
</script>